<template>
	<view class="page">
		<!-- 数据可视化展示 —— start -->
		<base-data-show v-if="tabbarValue === '数据可视化'" ></base-data-show>
		<!-- 数据可视化展示 —— end -->
		<!-- 监控视频 ——start -->
		<base-vedio v-if="tabbarValue === '监控视频'" ></base-vedio>
		<!-- 基地信息 ——start -->
		<base-info v-if="tabbarValue === '基地信息'" ></base-info>
		<!-- 基地信息 ——end -->
		<!-- 底部导航栏 ——start -->
		<u-tabbar
		class="tabbar"
			:value ="tabbarValue"
			@change="changeCurrentBar()"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
		<u-tabbar-item text="基地信息"  name="基地信息" icon="bookmark-fill"  inactiveColor="#E5E5E5" activeColor="#23b8ff"></u-tabbar-item>
			<u-tabbar-item text="数据可视化" name="数据可视化" icon="heart-fill"  inactiveColor="#E5E5E5" activeColor="#23b8ff"></u-tabbar-item>
			<u-tabbar-item text="监控视频" name="监控视频" icon="play-circle-fill"  inactiveColor=" #E5E5E5" activeColor="#23b8ff" ></u-tabbar-item>
		</u-tabbar>
		<!-- 底部导航栏 ——end -->
		<!-- 基地选择弹框 ——start -->
		<picker @change="setBase()"
		 @cancel="cancelChange()"
		value="index" :range="baseColumns">
			<view class="uni-input">{{baseColumns[index]}}</view>
			</picker>
			<!--  基地选择弹框 ——end-->
			
	</view>
	</view>
</template>

<script>
	import baseInfo from "../../page_base/componens/baseInfo/baseInfo.vue"
	import baseDataShow from "../../page_base/componens/baseDataShow/baseDataShow.vue"
	import baseVedio from "../../page_base/componens/baseVedio/baseVedio.vue"
	export default {
		onLoad(option) {
			this.id = uni.getStorageInfoSync('id');
			this.baseName = uni.getStorageInfoSync('baseName')
		},
		data() {
			return {
				id: '',
				baseName: '', //基地名称
				showChooseBase: false, //显示弹框显示与隐藏
				baseColumns: [
					['梅州市金绿集团羊岭村基地', '广西鸽子场', '福建鸽子场']
				], //基地picker的取值
				tabbarValue: '基地信息' // 底部导航栏的值
				

			}
		},
		created() {},
		methods: {
			//展示选择基地
			shoWBaseList() {
				this.showChooseBase = true;
			},
			//选择器选择基地
			setBase(e) {
				console.log(e);
			},
			//取消选择基地
			cancelSetBase() {
				this.showChooseBase = false;
			},
			//改变当前导航栏
			changeCurrentBar(name) {
				this.tabbarValue = name;
				console.log(name)
			}

		},
		components:{
			baseInfo,
			baseDataShow,
			baseVedio
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F0F0F0;
		height: 100%;
		width: 100%;

		.head {
			display: flex;
			background-color: #FFFFFF;
			height: 100rpx;
			padding-left: 20rpx;
			align-items: center;
			justify-content: space-around;
			font-size: 36rpx;
			line-height: 80rpx;

			.title {
				flex: 6;
				display: flex;
				font-weight: 700;
			}

			.button {
				flex: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: 20rpx;
				padding: 0 0 0 5rpx !important;
				width: 180rpx;
				font-size: 28rpx;
				letter-spacing: 3rpx;
				background-color: #23b8ff;
			}

		}
		.tabbar {
			background-color: #FFFFFF;
		}
	}
</style>
